<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>烟花</title>
        <style media="screen">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                width:800px;
                height:600px;
                position: relative;
                margin: 100px auto;
                background:#000000;
                border:2px solid red;
                overflow: hidden;
            }
            .ball{
                width: 10px;
                height: 10px;
                border-radius: 50%;
                position: absolute;
                bottom: 0;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        // 动画  :
        // animate(); 以结果为导向进行 jQuery ;
        // 选择元素 : $(选择符)
        // $("#box").animate({
        //     width : 100,
        //     height : 100
        // },5000)

        // OOA : 
        // 1. 绑定事件;
        // 2. 事件触发函数 : 
        //    1. 创建一个烟花主体;
        //    2. 运动到鼠标点击的位置;
        //    3. 创建一大堆烟花爆炸效果;
        //    4. 按照三角函数坐标运动;

        // OOD : 
        // function FireWork(){

        // }
        // FireWork.prototype.bindEvent = function(){

        // }
        // FireWork.prototype.createFireWork = function(){

        // }
        // FireWork.prototype.boom = function(){

        // }


        function FireWork(){
            this.container = document.querySelector("#box");
            this.bindEvent();   
        }
        FireWork.prototype.bindEvent = function(){
            var self = this;
            // 给容器绑定事件 ;
            // 主体烟花创建并运动到目标点; 
            self.container.onclick = function( evt ){
                var e = evt || event ;
                var fireWork = self.createFireWork();
                // 让元素有一个可靠的起始点;
                fireWork.style.left = evt.offsetX + "px";
                // 运动;
                // 运动结束有一个回调函数;
                $(fireWork).animate({
                    top : evt.offsetY
                },800 , function(){
                    fireWork.remove();
                })
            }
        }
        FireWork.prototype.createFireWork = function(){
            //  1. 创建一个div;
            //  2. div放在页面之中;
            var div = document.createElement("div");
            div.className = "ball";
            div.style.backgroundColor = "#" + Math.round(parseInt("ffffff", 16) * Math.random()).toString(16).padStart( 6 , "0");
            this.container.appendChild(div);
            return div;
        }
        FireWork.prototype.boom = function(){
            
        }

        var fw = new FireWork();


    </script>
</html>
